<!-- 公司详情 -->
<template>
    <page-header-wrapper @back="() => $router.go(-1)">
        <a-card :bordered="false" title="基本信息">
            <a-descriptions >
                <a-descriptions-item label="园区名称" >{{detail.parkName}}</a-descriptions-item>
                <a-descriptions-item label="地区" >{{detail.province}}{{detail.city}}{{detail.area}}</a-descriptions-item>
                <a-descriptions-item label="状态" ><a-badge :status="detail.state | statusTypeFilter" :text="detail.state | statusFilter" /></a-descriptions-item>
                <a-descriptions-item label="备注" :span="3">{{detail.remark}}</a-descriptions-item>
            </a-descriptions>
            
        </a-card>
        <a-card style="margin-top:20px" :bordered="false" title="园区个体户行业政策配置">
            <a-button slot="extra" type='primary'  @click="add">添加行业</a-button>
            <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ 'total': total ,'showSizeChanger': true,'pageSize': size,}" size="small">
                <div slot="receiptExample" slot-scope="receiptExample">
                    <div v-if="receiptExample && receiptExample.substring(0,4) == 'http'">
                        <img @click="showImg(receiptExample)" style="width: 120px;height: 60px;margin-right: 10px;display: inline-block;" :src="receiptExample.split(',')[0]" alt="">
                    </div>
                    <div v-else>-</div>
                </div>
                <div slot="invoicingCategory" slot-scope="invoicingCategory">
                    <ellipsis :length="18" tooltip>{{ invoicingCategory == '' ? '-' : invoicingCategory }}</ellipsis>
                </div>
                <div slot="businessScope" slot-scope="businessScope">
                    <ellipsis :length="18" tooltip>{{ businessScope == '' ? '-' : businessScope }}</ellipsis>
                </div>
                <div slot="operation" slot-scope="text,record">
                    <div class="editable-row-operations">
                        <a-button type="link" @click="update(record)">编辑</a-button>
                        <a-popconfirm
                            title="是否确认删除当前园区行业配置?"
                            ok-text="Yes"
                            cancel-text="No"
                            @confirm="del(record)"
                        >
                            <a-button type="link">删除</a-button>
                        </a-popconfirm>
                    </div>
                </div>
            </a-table>
        </a-card>

        <a-modal 
            v-model="visible" 
            title="修改记录"
            width="70%"
            @ok="handleOk" 
            @cancel="visible = false">
            <a-form-model :model="item" ref="ruleForm" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
                <a-form-model-item label="行业" prop="industry">
                    <a-input v-model="item.industry" :disabled="!isAdd" placeholder="请输入行业信息" allowClear/>
                </a-form-model-item>
                <a-form-model-item label="开票限额">
                    <a-input v-model="item.quota" placeholder="例：0万<年度<300万" allowClear/>
                </a-form-model-item>
                <a-form-model-item label="核定税种">
                    <a-input v-model="item.taxCategory" placeholder="请输入核定税种" allowClear/>
                </a-form-model-item>
                <a-form-model-item label="开票类目">
                    <!-- <a-input v-model="item.invoicingCategory" placeholder="请输入开票类目" allowClear/> -->
                    <a-textarea v-model="item.invoicingCategory" rows="4" placeholder="请输入开票类目" allowClear/>
                </a-form-model-item>
                <a-form-model-item label="经营范围">
                    <a-textarea v-model="item.businessScope" rows="4" placeholder="请输入经营范围" allowClear/>
                </a-form-model-item>
                <a-form-model-item label="名称示例">
                    <a-input v-model="item.nameExample" placeholder="请输入名称示例" allowClear/>
                </a-form-model-item>
                <a-form-model-item label="发票样例">
                    <a-upload
                        name="file"
                        list-type="picture-card"
                        @change="handleChange"
                        @preview="handlePreview"
                        :before-upload="beforeUpload"
                        :fileList = fileList
                        accept=".pdf,.jpg,.png,.jpeg"
                        :remove="()=>{fileList = []}"
                    >
                        <div v-if="fileList.length < 1">
                            <a-icon type="plus" />
                            <div class="ant-upload-text">上传</div>
                        </div>
                    </a-upload>
                </a-form-model-item>
            </a-form-model>
        </a-modal>

        <!-- 上传图片预览 -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
        <!-- 表格图片预览 -->
        <a-modal :visible="previewImgVisible" :footer="null" @cancel="previewImgVisible = false">
            <a-carousel autoplay dots-class="slick-dots slick-thumb" style="margin-bottom:60px">
                <div v-for="(img,i) in showImgs" :key="i">
                    <img :src="img" alt=""/>
                </div>
                <a slot="customPaging" slot-scope="props">
                    <img :src="getImgUrl(props.i)" />
                </a>
            </a-carousel>
        </a-modal>
    </page-header-wrapper> 
</template>

<script>
import { columns } from './table';
import { IndustrialPolicyList , updateIndustriallPolicy , delIndustrialPolicy } from '@/api/industrial';
import { Ellipsis } from '@/components';
import { fileUpload } from '@/api/system';
import { getBase64 , fileProcess } from '@/utils/util';
export default {
    components: {
        Ellipsis,
    },
    data () {
        return {
            detail: {},
            dataList: [],
            isload: false,
            page: 1,
            size: 10,
            total: 0,
            visible: false,
            columns,
            isAdd: false,
            item: {
                id: '',
                industrialParkId: '', // 园区 ID
                industry: '', // 行业
                quota: '', // 开票限额
                taxCategory: '', // 核定税种
                invoicingCategory: '', // 开票类目 
                businessScope: '', // 经营范围
                nameExample: '', // 名称示例
                receiptExample: '', // 发票样例
            },
            fileList: [],
            rules: {
                industry: [
                    { required: true, message: '请输入行业信息', trigger: 'blur' },
                ],
            },
            previewImage: '',
            previewVisible: false,
            previewImgVisible: false,
            showImgs: [],
        };
    },
    created(){
        this.detail = JSON.parse(this.$route.query.detail)
        this.getData();
    },
    methods: {
        // 获取列表数据
        getData(){
            let _this = this
            _this.isload = true
            const params = {
                'pageIndex': _this.page,
                'pageSize': _this.size,
                'industrialParkId': _this.detail.id,
            }
            IndustrialPolicyList(params)
            .then(res=>{
                _this.isload = false
                if(res.success){
                    _this.dataList = res.data;
                    _this.total = res.totalCount;
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 添加
        add(){
            this.item.id = '';
            this.item.industrialParkId = this.detail.id;
            this.item.industry = '';
            this.item.quota = '';
            this.item.taxCategory = '';
            this.item.invoicingCategory = '';
            this.item.businessScope = '';
            this.item.nameExample = '';
            this.item.receiptExample = '';
            this.isAdd = true;
            this.visible = true;
        },
        // 修改
        update(item){
            this.item = JSON.parse(JSON.stringify(item));
            this.fileList = [];
            if(item.receiptExample != '' && item.receiptExample != null){
                this.fileList.push({
                    'uid': item.id,
                    'id': item.id,
                    'url': item.receiptExample,
                    'status':'done',
                    'name':'image.png',
                    'isUrl': true,
                })
            }
            this.isAdd = false;
            this.visible = true;
        },
        // 确认添加、修改
        handleOk(){
            let _this = this;
            _this.$refs.ruleForm.validate(valid => {
                if(valid){
                    updateIndustriallPolicy(_this.item).then(res=>{
                        if(res.success){
                            _this.$notification['success']({
                                message: '温馨提示',
                                description: _this.isAdd ? '添加成功' : '修改成功',
                                duration: 8
                            })
                            _this.visible = false;
                            _this.getData()
                        }else{
                            _this.$notification['error']({
                                message: '温馨提示',
                                description: res.errMessage,
                                duration: 8
                            })
                        }
                    })
                }
            })
        },
        // 删除
        del(item){
            let _this = this
            const params = {
                'id':item.id,
            }
            delIndustrialPolicy(params)
            .then(res=>{
                if(res.success){
                    _this.visible = false
                    _this.getData()
                    _this.$notification['success']({
                        message: '提示',
                        description: '删除成功',
                        duration: 8,
                    })
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        beforeUpload(file) {
            return false;
        },
        handleChange({file,fileList}){
            let _this = this
            const status = file.status;
            if(file.status === 'removed'){
                this.fileList = []
                return
            }
            this.fileList = fileList
            const formData = new FormData();
            formData.append('multipartFile',file)
            fileUpload(formData)
            .then(res=>{
                if(res.success){
                    _this.item.receiptExample = res.data
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        // 预览图片
        showImg(imgs){
            if(imgs){
                this.showImgs = imgs.split(',')
                console.log(this.showImgs,'imgs')
                this.previewImgVisible = true
            }
        },
        getImgUrl(i){
            return this.showImgs[i]
        },
    }
}

</script>
<style scoped>
.ant-carousel >>> .slick-slide img {
    text-align: center;
    height: 300px;
    line-height: 300px;
    background: #364d79;
    overflow: hidden;
    width: 100%;
}
.ant-carousel >>> .slick-thumb {
  bottom: -15px;
}
.ant-carousel >>> .slick-thumb li {
  width: 60px;
  height: 45px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}
</style>